// 数据列表
<template>
  <div id="main">
    <h2
      v-if="tableData[0].area"
      style="text-align: center; color: #343434; margin-bottom: 2vh"
    >
      {{ (tableData[0].length != 0 ? tableData[0].area : "") + this.title }}
    </h2>
    <el-table
      :data="tableData"
      :row-style="{
        height: '40px',
        'line-height': '50px !important',
        'text-align': 'center',
      }"
      :cell-style="{
        padding: '0',
        'padding-top': '3px',
        'line-height': '50px !important',
        'text-align': 'center',
      }"
      :row-class-name="tableRowClassName"
      style="width: 90%; margin-left: 5%; font-size: 0.26rem; color: #131313"
      :header-cell-style="{
        fontWeight: 600,
        fontSize: '15px',
        color: '#000000 !important',
      }"
    >
      <el-table-column
        v-for="(item, index) in typeList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="6" :offset="9" style="margin-top: 2vh">
        <el-pagination
          @current-change="currentChange"
          :current-page.sync="currentPage"
          :page-size="15"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "dataTable",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    // currentPage: {
    // 	type: Number,
    // 	default: 1
    // },
    // total: {
    // 	type: Number,
    // 	default: 10
    // },
  },
  data() {
    return {
      // title: "请选择单位相同的两种选项",
      currentPage: 1,
      total: 10,
      select: null,
      typeList: [
        {
          prop: "year_date",
          label: "日期",
        },
        {
          prop: "value",
          label: "数据",
        },
        {
          prop: "unit",
          label: "单位",
        },
      ],
      tableData: [],
      data: [],
      params: null,
      params1: null,
      url: {
        getEcharts: "/web/program/getEcharts",
      },
    };
  },
  created() {},
  methods: {
    getPage(params, select) {
      this.data = [];
      this.params = params;
      this.params1 = params;
      this.select = select;
      this.currentChange();
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "";
      }
    },

    async currentChange() {
      this.params = JSON.parse(JSON.stringify(this.params1));
      let type = this.params.param.type;
      let area = this.params.param.area;
      let target = this.params.param.target;
      if (this.select != null) {
        if (this.select == 1) {
          if (area != undefined && area.length > 1) {
            for (let value in area) {
              await this.handleCurrentChange(area[value], 1);
            }
          } else {
            await this.handleCurrentChange();
          }
        }
        if (this.select == 2) {
          if (target != undefined && target.length > 1) {
            for (let value in target) {
              await this.handleCurrentChange(target[value], 2);
            }
          } else {
            await this.handleCurrentChange();
          }
        }
        if (this.select == 3) {
          if (type != undefined && type.length > 1) {
            for (let value in type) {
              await this.handleCurrentChange(type[value], 3);
            }
          } else {
            await this.handleCurrentChange();
          }
        }
      } else {
        await this.handleCurrentChange();
      }
    },
    async handleCurrentChange(value, type) {
      this.data = [];
      if (this.params1.param.area != undefined) {
        if (typeof this.params1.param.area[0] == "string") {
          this.params.param.area = this.params1.param.area.join("/");
        } else {
          this.params.param.area = this.params1.param.area[0].join("/");
        }
      }
      if (type == 1) {
        if (typeof value == "string") {
          this.params.param.area = value;
        } else {
          this.params.param.area = value.join("/");
        }
      }
      if (this.params1.param.target != undefined) {
        this.params.param.target = this.params1.param.target.toString();
      }
      if (type == 2) {
        this.params.param.target = value;
      }
      if (this.params1.param.type != undefined) {
        this.params.param.type = this.params1.param.type.toString();
      }
      if (type == 3) {
        this.params.param.type = value;
      }
      this.params.pageNum = this.currentPage;
      let res = await this.$http.post(this.url.getEcharts, this.params);
      if (res.data.code == 200) {
        let data = res.data.result.records;
        this.data.push(data);
        this.tableData = [];
        if (this.data.length > 2) {
          this.$message.warning("仅可对比两种数据");
          return;
        }
        let valueName = [];
        this.data.forEach((e) => {
          if (this.select != null) {
            if (this.select == 1) {
              if (this.params1.param.area.length > 1) {
                if (e[0].area.indexOf("/") != -1) {
                  valueName.push(
                    e[0].area.split("/")[0] + e[0].area.split("/")[1]
                  );
                } else {
                  valueName.push(e[0].area);
                }
              } else {
                if (e[0].child_kind != undefined) {
                  valueName.push(e[0].child_kind);
                } else {
                  if (e[0].area.indexOf("/") != -1) {
                    valueName.push(
                      e[0].area.split("/")[0] + e[0].area.split("/")[1]
                    );
                  } else {
                    valueName.push(e[0].area);
                  }
                }
              }
            }
            if (this.select == 2) {
              valueName.push(e[0].target);
            }
            if (this.select == 3) {
              valueName.push(e[0].type);
            }
          } else {
            if (e[0].child_kind != undefined) {
              valueName = [];
              valueName.push(e[0].child_kind);
            }
          }
        });

        if (this.data.length == 2) {
          for (let value in this.data[0]) {
            let param = {};
            param.year_date = this.data[0][value].year_date;
            param.value1 = this.data[0][value].value;
            param.value2 = this.data[1][value].value;
            param.difference = (
              this.data[0][value].value - this.data[1][value].value
            ).toFixed(2);
            param.unit = this.data[1][value].unit;
            this.tableData.push(param);
          }
          this.typeList = [
            {
              prop: "year_date",
              label: "日期",
            },
            {
              prop: "value1",
              label: valueName[0],
            },
            {
              prop: "value2",
              label: valueName[1],
            },
            {
              prop: "difference",
              label: "差值",
            },
            {
              prop: "unit",
              label: "单位",
            },
          ];
        } else {
          this.typeList = [
            {
              prop: "year_date",
              label: "日期",
            },
            {
              prop: "value",
              label: valueName[0],
            },
            {
              prop: "unit",
              label: "单位",
            },
          ];
          this.tableData = this.data[0];
        }
        this.total = res.data.result.total;
      } else {
        this.$message.warning(res.data.message);
      }
    },
  },
};
</script>

<style lang="scss">
.el-table .warning-row {
  background: #e8f4ff !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}
#main {
  width: 100%;
  padding-top: 0.28rem;
}
</style>
